<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模态框</title>
  <!--引入BootStrap的核心文件-->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <!--引入Jquery的核心js文件，需要在bootstrap的js之前引入-->
  <script src="js/jquery-3.6.1.min.js" type="text/javascript" charset="UTF-8"></script>
  <!--引入BootStrap的js文件-->
  <script src="js/bootstrap.min.js" type="text/javascript" charset="-UTF-8"></script>

</head>
<body>

<!--
  操作模态框
      通过data属性：
          在控制器元素（比如按按钮或者链接）上设置属性data-toggle="modal"，同时设置data-target="#ldentlfler" 或 href=:#identifler"类指定要切换的特定的模态框（带有id=""identifier）>
      通过JavaScript:
          这种技术，你可以通过简单一行JavaScript来调用带有Id="identifier"的模态框

          打开模态框：$('#identifier').modal('show')
          关闭模态框：$('#identifier').modal('hide')
-->

<!--通过data属性：-->
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">开始演示模拟框</button>
<button class="btn btn-primary" id="btn">打开模态框</button>

<!--模态框（Modal）:-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">添加用户</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" role="form">
          <div class="form-group">
            <label for="uname" class="col-lg-2 control-label">姓名</label>
            <div class="col-lg-8">
              <input type="text" id="uname" class="form-control" placeholder="请输入姓名">
            </div>
          </div>
          <div class="form-group">
            <label for="upwd" class="col-lg-2 control-label">密码</label>
            <div class="col-lg-8">
              <input type="text" id="upwd" class="form-control" placeholder="请输入密码">
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" datadismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="submit_btn">提交更改</button>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  // 绑定按钮的点击时间
  $('#btn').click(function(){
    // 手动打开模态框
    $('#myModal').modal("show");
  });

  // 关闭模态框
  $("#submit_btn").click(function (){
    // 手动关闭动态框
    $("#myModal").modal("hide");
  });
</script>
</body>
</html>